<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>首页</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mUnG2gyZMpF536eT3rP2jcMwaRTcPQDB"></script>
	<style>
		body,
		html {
			background-color: #fff
		}

		ol,
		ul {
			list-style: none
		}

		body input[type=text],
		li,
		ul {
			margin: 0;
			padding: 0;
			border: 0
		}

		.mui-slider-indicator .mui-indicator {
			background: #e5e5e3;
		}

		.mui-slider-indicator .mui-active.mui-indicator {
			background: #fff100;
		}

		.clear {
			clear: both;
			visibility: hidden;
			overflow: hidden;
			height: 0;
			font-size: 0;
			line-height: 0
		}

		.mui-bar-tab .mui-tab-item.mui-active {
			color: #888
		}

		.mui-active {
			background: #e5e5e3;
		}

		.nav-active span {
			color: #1c83fc
		}

		.index_header {
			display: flex;
			padding: .213rem .4rem;
			background: #1c83fc;
			color: #fff;
			align-items: center;
			justify-content: space-between
		}

		.index_header .city {
			color: #353535;
			font-size: .37rem
		}

		.index_header .city a {
			display: flex;
			align-items: center
		}

		.index_header .city span {
			color: #fff;
			font-size: .4rem
		}

		.index_header .city img {
			display: inline-block;
			margin-right: .17rem;
			width: .426rem;
			height: .6rem
		}

		.index_header .city i {
			margin-left: .05rem;
			color: #3d3d3d;
			color: #fff;
			font-size: .366rem
		}

		.index_header .search a {
			color: #fff
		}

		.index_header .search input {
			width: 5.33rem;
			height: auto;
			border: 0;
			font-size: .32rem;
			line-height: normal
		}

		.index_header .search .mui-icon-search {
			font-size: .56rem
		}

		#slider {
			height: 3.2rem
		}

		#slider .mui-slider-loop {
			height: 3.2rem
		}

		#slider img {
			height: 3.2rem
		}

		.index_nav {
			padding: 0 .4rem
		}

		.index_nav ul li {
			float: left;
			margin-top: .3rem;
			width: 25%;
			text-align: center
		}

		.index_nav ul li img {
			display: block;
			margin: .106rem auto;
			width: 1.17rem;
			height: 1.17rem
		}

		.index_nav ul li span {
			display: block;
			color: #353535;
			font-size: .35rem
		}

		.index_notice {
			display: flex;
			padding: .4rem .4rem;
			align-items: center;
			justify-content: space-between
		}

		.index_notice .p_l {
			display: flex;
			align-items: center
		}

		.index_notice .p_r {
			display: flex;
			width: 6rem;
			align-items: center;
			justify-content: space-between
		}

		.index_notice img {
			display: inline-block;
			width: 1.06rem;
			height: .733rem
		}

		.index_notice div {
			display: flex;
			height: .733rem;
			align-items: center
		}

		.index_notice h4 {
			display: inline-block;
			margin: 0;
			height: .5rem;
			color: #353535;
			font-size: .373rem;
			line-height: normal
		}

		.index_notice span {
			display: inline-block;
			margin: 0;
			margin: 0 .106rem;
			padding: 1px 2px;
			border: 1px solid red;
			border-radius: .1rem;
			color: red;
			font-size: .21rem;
			line-height: normal
		}

		.index_notice p {
			display: inline-block;
			overflow: hidden;
			margin: 0;
			width: 7.5rem;
			height: .5rem;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: .4rem;
			line-height: normal;
			line-height: .5rem
		}

		.index_notice p a {
			color: #353535
		}

		.index_notice i {
			float: right;
			color: #cbcbcb;
			font-size: .366rem
		}

		.index_avertisement .div1 {
			margin-bottom: 1px
		}

		.index_avertisement .div1 ul {
			display: flex;
			justify-content: space-around
		}

		.index_avertisement .div1 ul li {
			height: 3.306rem
		}

		.index_avertisement ul li img {
			display: block;
			width: 100%;
			height: 100%
		}

		.index_avertisement .div1 .l1 {
			margin: 0 1px
		}

		.index_avertisement .div1 .l2 {
			margin-right: 1px
		}

		.index_avertisement .div2 ul {
			display: flex;
			justify-content: space-around
		}

		.index_avertisement .div2 ul li {
			margin-left: 1px;
			height: 3.306rem
		}

		.index_avertisement .div2 ul li:last-child {
			margin-right: 1px
		}

		.index_shop {
			margin-bottom: 50px
		}

		.index_shop .title {
			display: flex;
			width: 100%;
			height: 1rem;
			color: #353535;
			text-align: center;
			line-height: 1rem;
			align-items: center;
			justify-content: center
		}

		.index_shop .title img {
			display: block;
			width: .64rem;
			height: .466rem
		}

		.index_shop .title p {
			margin: 0 .266rem;
			font-weight: 700;
			font-size: .373rem
		}

		.index_shop .con li p {
			margin-bottom: 0
		}

		.index_shop .con li {
			float: left;
			margin-bottom: .133rem;
			width: 4.906rem;
			height: 7.6rem;
			-webkit-box-shadow: #c3c3c3 0 0 10px;
			-moz-box-shadow: #c3c3c3 0 0 10px;
			box-shadow: #c3c3c3 0 0 10px
		}

		.index_shop .con li:nth-last-of-type(2n) {
			float: right
		}

		.index_shop .con .img {
			width: 4.906rem;
			height: 4.906rem
		}

		.index_shop .con .img img {
			display: block;
			width: 100%;
			height: 100%
		}

		.index_shop .con .t {
			display: -webkit-box;
			overflow: hidden;
			margin-top: .426rem;
			padding: 0 .266rem;
			color: #000204;
			font-size: .373rem;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2
		}

		.index_shop .con .t2 {
			display: flex;
			padding: 0 .266rem;
			line-height: 1.333rem;
			justify-content: space-between
		}

		.index_shop .con .t2 .l {
			color: red;
			font-size: .4rem
		}

		.index_shop .con .t2 .r {
			color: #888;
			font-size: .293rem
		}
	</style>
</head>

<body>
	<div id="app">
		<!--顶部-->
		<header>
			<div class="index_header">
				<div class="city">
					<a href="select_area.html">
						<img src="../images/index_city.png" />
						<span v-html="shequ">定位中...</span>
						<i class="mui-icon mui-icon-arrowdown"></i>
					</a>
				</div>
				<div class="search">
					<a href="search-ware.html">
						<i class="mui-icon mui-icon-search"></i>
					</a>
					<!--<input type="text" name="" id="search" value="" placeholder="请输入关键词搜索..."/><i class="mui-icon mui-icon-closeempty" @click="empty"></i>-->
				</div>
			</div>
		</header>
		<!--<h2>{{ccc}}</h2>-->
		<!--banner-->
		<div id="slider" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a :href="'goods_detail.html?goodsid='+ banner_next.url">
						<img :src="banner_next.pic" />
					</a>
				</div>
				<!-- 第N张 -->
				<div class="mui-slider-item" v-for="(item,i) in banner">
					<a :href="'goods_detail.html?goodsid='+ item.url">
						<img :src="item.pic" />
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a :href="'goods_detail.html?goodsid='+ banner_previous.url">
						<img :src="banner_previous.pic" />
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator" v-for="o, i in banner" :class="i===0 ? 'mui-active':''"></div>
			</div>
		</div>

		<!--导航-->
		<div class="index_nav">
			<ul>
				<li v-for="(item,i) in nav_list" class="mok" :data-id="item.tid" :value="item.name">
					<a>
						<img :src="item.logo" />
						<span v-html="item.name"></span>
					</a>
				</li>
				<!--<li><a href="gd_kh.html"><img src="../images/index_mk1.png"/><span>广电服务</span></a></li>
				<li><img src="../images/index_mk2.png"/><span>政务服务</span></li>
				<li><a href="bm_sh.html"><img src="../images/index_mk3.png"/><span>便民服务</span></a></li>
				<li><img src="../images/index_mk4.png"/><span>健康服务</span></li>
				<li><img src="../images/index_mk5.png"/><span>养老服务</span></li>
				<li><img src="../images/index_mk6.png"/><span>理财服务</span></li>
				<li><a href="logn.html"><img src="../images/index_mk7.png"/><span>旅游服务</span></a></li>
				<li><a href="../index.html"><img src="../images/index_mk8.png"/><span>商家服务</span></a></li>-->
			</ul>
			<div class="clear"></div>
		</div>

		<div class="index_notice" v-if="sqgg_type" @click="gonggao('gonggao_xiangqing.html?id='+shequgonggao.id+'&type=0&status=0&types=0')">
			<img src="../images/index_gonggao.png" />
			<div class="">
				<!--<a href="http://127.0.0.1:8020/7.11/page/xiangqing.html?id=102&type=0&status=0"></a>-->
				<p>
					<a :href="'xiangqing.html?id='+shequgonggao.id+'&type=0&status=0&types=0'" v-html="shequgonggao.title"></a>
				</p>
				<i class="mui-icon mui-icon-forward"></i>
			</div>

		</div>

		<!--广告-->
		<div class="index_avertisement">
			<div class="div1">
				<ul class="mui-row">
					<li :class="i==0?'l1 mui-col-xs-8 mui-col-sm-8':'l2 mui-col-xs-4 mui-col-sm-4'" v-for="(item,i) in mofang">
						<a :href="'goods_detail.html?goodsid='+item.url">
							<img :src="item.pic" />
						</a>
					</li>
				</ul>
			</div>
			<div class="div2">
				<ul class="mui-row">
					<li class="l1 mui-col-xs-4 mui-col-sm-4" v-for="(item,i) in mofang2">
						<a :href="'goods_detail.html?goodsid='+item.url">
							<img :src="item.pic" />
						</a>
					</li>
				</ul>
			</div>
		</div>

		<!--商品-->
		<div class="index_shop">
			<div class="title">
				<img src="../images/index_11.png" />
				<p>精品专区</p>
				<img src="../images/index_12.png" />
			</div>
			<div class="con">
				<ul>
					<li v-for="item in like_list" style="float: left;margin-left: 0.1rem;margin-right: 0;width: 4.806rem;">
						<a :href="'goods_detail.html?goodsid='+ item.goodsid">
							<p class="img" style="width: 100%;">
								<img :src="item.pic" />
							</p>
							<p class="t" v-html="item.name"></p>
							<p class="t2">
								<span class="l">￥{{item.min_price}}</span>
								<span class="r">{{item.sales}}人付款</span>
							</p>
						</a>
					</li>

					<!--<li>
						<p class="img"><img src="../images/cbd.jpg"/></p>
						<p class="t">九阳DJ13E-Q9女神紫智能破壁豆浆机Q9女神紫智能破壁豆浆机Q9女神紫智能破壁豆浆机</p>
						<p class="t2"><span></span><span></span></p>
					</li>
					<li>
						<p class="img"><img src="../images/cbd.jpg"/></p>
						<p class="t">九阳DJ13E-Q9女神紫智能破壁豆浆机Q9女神紫智能破壁豆浆机Q9女神紫智能破壁豆浆机</p>
						<p class="t2"><span class="l">￥999.00</span><span class="r">888人付款</span></p>
					</li>
					<li>
						<p class="img"><img src="../images/cbd.jpg"/></p>
						<p class="t">九阳DJ13E-Q9女神紫智能破壁豆浆机Q9女神紫智能破壁豆浆机Q9女神紫智能破壁豆浆机</p>
						<p class="t2"><span></span><span></span></p>
					</li>-->
				</ul>
			</div>
			<div class="clear"></div>
		</div>

		<nav class="mui-bar mui-bar-tab nav-bar-index">
			<a class="mui-tab-item nav-active" href="index.html">
				<span class="mui-icon">
					<img src="../images/index-01-hove.png" />
				</span>
				<span class="mui-tab-label">社区首页</span>
			</a>
			<a class="mui-tab-item" href="sqgc_list.html">
				<span class="mui-icon">
					<img src="../images/index-02.png" />
				</span>
				<span class="mui-tab-label">社区广场</span>
			</a>
			<a class="mui-tab-item" href="shop_home.html">
				<span class="mui-icon">
					<img src="../images/index-03.png" />
				</span>
				<span class="mui-tab-label">社区商城</span>
			</a>
			<a class="mui-tab-item" href="my.html">
				<span class="mui-icon">
					<img src="../images/index-04.png" />
				</span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</div>
	<div id="allmap"></div>
</body>

</html>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
<script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	document.addEventListener('plusready', function () {
		checkArguments();
	}, false);
	// 判断启动方式
	
		function GetQueryString(k,str) {
	 
		if(str.search(k)>0){
            var arr = str.split("?");
            var res_arr = arr[1].split("&");
            var res = {};
            for(var i = 0; i < res_arr.length; i++) {
                var item = res_arr[i].split("=");
                res[item[0]] = item[1];
            }
            return res[k];
		}

 		return false;
	}
	
	function checkArguments() {
		//	 alert(plus.runtime.launcher );
		if (JSON.stringify(plus.webview.currentWebview().opener())) {
			return;
		}
		if (plus.runtime.launcher == "default") {
			return
		} else if (plus.runtime.launcher == "scheme") {
			var args = plus.runtime.arguments;
			//			alert(JSON.stringify(args))
			if (args) {
		 
				var type = args.split("?")[0].split("//")[1];
				var id = GetQueryString("id",args)
				var sid = GetQueryString("sid",args);
				util.log('id-->'+id)
				util.log('sid-->'+sid)
				if (type == "share_goods") {
					setTimeout(function () {
						mui.openWindow("goods_detail.html?goodsid=" + id);
					}, 1000)
				}
				if (type == "share_group") {
					setTimeout(function () {
						mui.openWindow("share_group2.html?orderid=" + id +"&sid="+sid);
					}, 1000)
				}

			}
		}
	}
	// 处理从后台恢复
	document.addEventListener('newintent', function () {
		console.log("addEventListener: newintent");
		checkArguments();
	}, false);


	var vue = new Vue({
		el: '#app',
		data: {
			se: '789',
			banner: '', //轮播图
			banner_previous: '',
			banner_next: '',
			nav_list: [], //导航
			shop_list: [], //特价商品
			like_list: [],
			shequ: '',
			address: '',
			shequgonggao: '',
			sqgg_type: false, //社区公告显示
			mofang: '',
			mofang2: '',
			address: '',
			ccc: '11'
		},
		methods: {
			//清空搜索框
			empty: function () {
				document.querySelector('#search').value = ''
			},
			//公告
			gonggao: function (e) {
				mui.openWindow({
					url: e,
					id: e,
					creatNew: true,
				})
			},

		},
		mounted: function () {

			var that = this;
			//请求一级分类
			mui.get(url + "api/article/getCatOne", {}, function (data) {
				var json = JSON.parse(data).data;
				vue.nav_list = []
				vue.nav_list = json
			});

			//mui初始化
			mui.init({
				statusBarBackground: '#f7f7f7',
				beforeback: function () { //监听物理返回按键的方法
					　　　　
					mui.confirm("确定退出吗?", '温馨提示', ['确定', '取消'], function (e) {
						console.log(JSON.stringify(e))
						if (e.index == 0) {
							localStorage.clear()
							mui.currentWebview.close();
						}
					})　　　　　　
					return false; //阻止默认的返回　　　　　　　　
				}
			});
			// 绑定点击事件初始化
			bind_tap_init()
 

			//关闭其他webview
			clear_view();
		}
	})





	var address = localStorage.getItem("address");
	if (address) {
		address = JSON.parse(address)
	}
	if (!address || !address.sqid) {
		console.log("address")

		mui.toast('定位中...', {
			duration: 'long',
			type: 'div'
		})

		get_position();
	} else {
		console.log('address有值')
		vue.shequ = address.name;
		vue.address = address;
		Ajax();
	}
 
	// 获取首页数据
	function Ajax() {
		console.log("Ajax()->>获取社区公告")
		$.ajax({
			type: "post",
			url: "https://zhapp.4hl.cn/api/system/push",
			data: {
				sqid: vue.address.sqid
			},
			success: function (res) {
				var data = JSON.parse(res);
				console.log('获取社区公告->' + JSON.stringify(data));
				if (data.data == '' || data.data == null || data.data == undefined) {
					vue.sqgg_type = false;
				} else {
					vue.sqgg_type = true;
					vue.shequgonggao = data.data[0]
				}

			},
			error: function (err) {

			}

		});
		//banner
		mui.get(url + "api/banner/banlist", {
			bid: vue.address.sqid,
			sqid: vue.address.sqid,
			type: 1
		}, function (data) {
			console.log('banner->' + JSON.stringify(data))
			if (data.data == '' || data.data == null) {
				mui.toast('暂无数据', {
					duration: 'long',
					type: 'div'
				})
				return false;
			} else {
				vue.banner = data.data
				vue.banner_previous = vue.banner[0]
				vue.banner_next = vue.banner[vue.banner.length - 1]
			}
			var gallery = mui('#slider');
			setTimeout(function () {
				gallery.slider({
					interval: 3000
				});
			}, 2000);
		}, 'json');
		//魔方图
		mui.get(url + 'api/banner/banlist', {
			bid: vue.address.sqid,
			sqid: vue.address.sqid,
			type: 2
		}, function (data) {
			var json = JSON.parse(data).data;
			if (json == '' || json == null) {
				mui.toast('暂无数据', {
					duration: 'long',
					type: 'div'
				})
				return false;
			} else {
				var data = [];
				var data2 = [];
				for (var i = 0; i < 2; i++) {
					data.push(json[i]);
				}
				for (var i = 2; i < json.length; i++) {
					data2.push(json[i])
				}
				vue.mofang = data
				vue.mofang2 = data2
				//console.log(vue.mofang,'-----')
			}
			var data = []

			//vue.like_list = data;
			//      mui.each(json,function(key,value){
			//          vue.nav_list.push(value)
			//      });
		});
		//特价商品
		mui.post(url + 'api/goods/goodsclassify', {
			bid: vue.address.sqid,
			sqid: vue.address.sqid,
			type: 1
		}, function (data) {
			var json = JSON.parse(data);
			console.log('特价商品->' + JSON.stringify(json))
			if (json == '' || json == null) {
				mui.toast('暂无数据', {
					duration: 'long',
					type: 'div'
				})
				return false;
			} else {
				vue.like_list = json.data;
			}

		});
	}

	// 绑定点击事件初始化
	function bind_tap_init() {

		mui("#app").on('tap', '.mok', function () {
			//获取id
			var id = this.getAttribute("data-id");
			var name = this.getAttribute("value");
			console.log(id + '-' + name)
			mui.openWindow({
				url: 'gd_kh.html?tid=' + id + '&name=' + name,
				id: 'register_next',
			});
		});

		var slider = mui("#slider");
		//banner 跳转
		mui('#slider').on('tap', 'a', function () {
			mui.openWindow({
				url: this.href,
				id: this.href,
				creatNew: true,
			})
		})
		mui('.mui-bar-tab').on('tap', '.mui-tab-item', function () {
			localStorage.setItem("home_to_class_id", 0)
			mui.openWindow({
				url: this.href,
				id: this.href,
				creatNew: true,
			})
			//		mui.openWindow(this.href,this.href)
		})
		mui('.city').on('tap', 'a', function () {
			mui.openWindow({
				url: this.href,
				id: this.href,
				creatNew: true,
			})
		})
		mui('.search').on('tap', 'a', function () {
			mui.openWindow({
				url: this.href,
				id: this.href,
				creatNew: true,
			})
		})

		mui('.index_avertisement').on('tap', 'a', function () {
			mui.openWindow({
				url: this.href,
				id: this.href,
				creatNew: true,
			})
		})
		mui('.index_notice').on('tap', 'img', function () {
			mui.openWindow({
				url: this.href,
				id: this.href,
				creatNew: true,
			})
		})

		mui('.con').on('tap', 'a', function () {
			mui.openWindow({
				url: this.href,
				id: this.href,
				creatNew: true,
			})
		})
	}
	// 使用原生SDK定位
	function get_position() {
		// 使用原生SDK定位
		mui.plusReady(function () {
			plus.geolocation.getCurrentPosition(function (p) {
				mui.post(url + "api/Wisdom/get_add", {
					longitude: p.coords.longitude,
					latitude: p.coords.latitude,
					l: '',
					y: ''
				}, function (data) {
					var data = JSON.parse(data);
					mui.toast('定位社区成功', {
						type: 'div'
					})
					var arr = {
						"name": data.data.name,
						"bid": data.data.bid,
						'sqid': data.data.sqid,
						longitude: p.coords.longitude,
						latitude: p.coords.latitude
					}

					util.log('使用原生SDK定位-->' + JSON.stringify(arr))
					localStorage.setItem('address', JSON.stringify(arr))
					vue.shequ = arr.name;
					vue.address = arr;
					Ajax();
				});



			}, function (e) {
				mui.toast("定位失败")
				util.log('Geolocation error: ' + e.message);
			}, {

			});
		})
	}
	// 关闭其他webview
	function clear_view() {
		mui.plusReady(function () {
			setTimeout(function () {
				console.log('开始清离后台多余页面')
				var curr = plus.webview.currentWebview();
				var wvs = plus.webview.all();
				for (var i = 0, len = wvs.length; i < len; i++) {
					//关闭其他页面
					if (wvs[i].getURL() == curr.getURL() || wvs[i].getURL().match("shop_list_class"))
						continue;
					plus.webview.close(wvs[i], 'none');
					console.log('关闭了:' + wvs[i].getURL())
				}
			}, 500)
		})
	}
</script>
